$(function(){
    // 点击小图标弹出图标选择框
    $('#iconsOut').on('click',function(){
        $('#iconsOuter').toggle();
    });
    // 点击图标选择框关闭按钮关闭
    $('.closeBut').on('click',function(){
        $('#iconsOuter').toggle();
    });
    // 点击图标选择框里任意i图片修改左侧图片和隐藏域，用来上传，发现图片样式是通过类名控制的
    $('.icons-inner>.fa').on('click',function(){
        // 点击后关闭选择框
        $('#iconsOuter').toggle();
        // 获取点击的图标的类名
        let className=$(this).attr('class');
        // 修改左侧展示图标
        $('#iconsOut').attr('class',className);
        // 修改隐藏域储存的类名
        $('#classname').val(className);
    })
    // 注册提交点击事件
    $('#btn-add').on('click',function(){
        // 验证非空
        if(isNull('#name')){
            alert('你添加的新分类的名称不能为空');
            return;
        }else if(isNull('#slug')){
            alert('你添加的新分类的别名不能为空');
            return;
        }else if(isNull('#classname')){
            alert('你添加的新分类的图标不能为空');
            return;
        }
        // 收集表单域数据
        let data= $('#form').serialize();
        // console.log(data);
        $.post('/addCategoriesData',data,(res)=>{
            // console.log(res);
            if(res.code===200){
                alert('添加成功');
                // 将得到的数据使用第三方模板art-template模板引擎前端渲染出来
                let html=template('tp',res.data);
                // console.log(res.data);
                // console.log(html);
                $('tbody').append(html);
                clearInput();
            }
        })

    })

    // 注册点击删除数据事件

    // 声明两个变量传递id和要删除的tr
    let delId=null;
    let delTr=null;
    // 为了使模态框公用，不会发生请求冲突，声明定义一个状态变量
    let delStauts=null;
    $('tbody').on('click','.btn-danger',function(){
        delTr=$(this).parents('tr');
        delId=delTr.attr('data-id');
        // console.log(id);  //字符串
        delStauts=1;
        $('.modal-body').text('您是否确定要删除？');
        $('#exampleModalCenter').modal();
    });
    $('.modal-footer>.btn-primary').on('click',function(){
        if(delStauts==1){
            $.get('/deleteCategories',{id:delId},(res)=>{
                console.log(res);
                if(res.code==200){
                    //判断你是否成功删除数据
                    // 删除tr
                    delTr.remove();
                    // 把模态框隐藏
                    $('#exampleModalCenter').modal('hide');
                    // 将模态框状态变量初始化
                    delStauts=false;
                }
            });
        }
    })

    // 修改分类数据
    // 注册编辑点击事件
    let _thisTr=null;
    $('tbody').on('click','.btn-info',function(){
        // 先发送请求像数据库根据id提取最新的数据
        _thisTr=$(this).parents('tr');
        let id=_thisTr.attr('data-id');
        // console.log(id);
        $.get('/findCategoriesById',{id:id},(res)=>{
            // console.log(res);
            if(res.code==200){
                // 获取数据成功的情况下，将原来的数据展示
                $('#name').val(res.data.name);
                $('#slug').val(res.data.slug);
                $('#iconsOut').attr('class',`fa ${res.data.classname}`);
                $('#classname').val(res.data.classname);
                // 显示对应的按钮
                $('#editCategories').prop('hidden',false);
                $('#addCategories').prop('hidden',true)
                // 动态的生成一个隐藏域放在表单里面
                // 表单里面需要一个id，但是一开始这里面是没有隐藏域可以供id使用
                // 先判断表单的第一个子元素是不是隐藏域
                let form=$('#form');
                let first=form.children().eq(0);
                if(first.attr('type')==='hidden'){
                    // 如果有则不用接着生成,直接修改
                    first.val(res.data.id);
                }else{
                    //  如果没有则动态生成一个
                    let newInput=`<input type="hidden" name="id" value="${res.data.id}">`;
                    form.prepend(newInput);
                }       
            }
        })
    });
    // 注册取消点击事件
    $('#btn-cancel').on('click',function(){
        // 调用方法初始化表单内容
        clearInput();
        $('#editCategories').prop('hidden',true);
        $('#addCategories').prop('hidden',false);
    });
    // 注册保存修改事件
    $('#btn-sure').on('click',function(){
        $('.modal-body').text('您是否确定要修改？');
        $('#exampleModalCenter').modal();
        delStauts=2;
    });
    $('.modal-footer>.btn-primary').on('click',function(){
        // 区分上面的删除模态框确定事件
        if(delStauts==2){
            let img=$('#iconsOut').attr('class').substring(3);
            // console.log(img);
            $('#classname').val(img);
            let data=$('#form').serialize();
            // console.log(data);
            // 将收集的数据上传
            $.get('/editCategories',data,(res)=>{
                // console.log(res);
                if(res.code===200){
                    // 当后端数据修改成功时，提示并将前端界面渲染修改一下
                    console.log(res);
                    _thisTr.children('td').eq(1).text(res.newData.name);
                    _thisTr.children('td').eq(2).text(res.newData.slug);
                    _thisTr.children('td').eq(3).children('i').attr('class','fa '+res.newData.classname);
                    // 调用方法初始化表单内容
                    clearInput();
                    $('#editCategories').prop('hidden',true);
                    $('#addCategories').prop('hidden',false);
                    $('#exampleModalCenter').modal('hide');
                }else{
                    console.log(res);
                }
            })
            
        }
    })


    // 实现全选，及批量删除功能

    // 实现批量按钮显示及全选
    // console.log($('thead input[type="checkbox"]'))
    let chechAll= $('thead input[type="checkbox"]');
    let delMultiple=$('.page-action>.btn-danger');
    chechAll.on('click',function(){
        let checks=$('tbody input[type="checkbox"]');
        checks.prop('checked',chechAll.prop('checked'));
        if(chechAll.prop('checked')){
            delMultiple.show();
        }else{
            delMultiple.hide();
        }
    })
    // console.log(checks)

    $('tbody').on('click','input[type="checkbox"]',function(){
        let ischecked=$('tbody input[type="checkbox"]:checked');
        let checks=$('tbody input[type="checkbox"]');
        // console.log(ischecked.length);  // 选中的伪数组的长度
        // console.log(ischecked);
        // ischecked.length===checks.length?chechAll.prop('checked',true):chechAll.prop('checked',false);
        let isCheckAll=ischecked.length===checks.length;
        chechAll.prop('checked',isCheckAll);
        // if(ischecked.length>1){
        //     // 当选超过一个形成多选，将批量删除按钮显示
        //     delMultiple.show();
        // }else{
        //     delMultiple.hide();
        // }
        ischecked.length>1?delMultiple.show():delMultiple.hide();
    })

    // 实现批量删除
    let idArr=[];
    delMultiple.on('click',function(){
        $('tbody input[type="checkbox"]:checked').each(function(i,e){
            idArr.push($(e).parents('tr').attr('data-id'));
        })
        // console.log(idArr);
        // 弹窗进行确认
        $('#exampleModalCenter').modal();
        delStauts=3;
        // 将获取的所有选中的元素id的传回服务器
    })
    let delIdArr=null;
    $('.modal-footer>.btn-primary').on('click',function(){
        if(delStauts=3){
            // console.log(idArr);
            $.get('/deleteCategoriesByIdArr',{data:idArr},(res)=>{
                console.log(res);
                // 提取删除数据的id
                if(res.code==200){
                    delIdArr=res.ids;
                    console.log(delIdArr)
                    $('tbody tr').each(function(i,e){
                        delIdArr.forEach(element => {
                            if(e.dataset.id==element.dataset.id){
                                $(e).remove();
                            }
                        });                     
                    })
                }
            })
            $('#exampleModalCenter').modal('hide');
            
        }
    })
})